import {useState} from "react";


/**
 * 封装自定义hook通用思路
 *
 * 1.声明一个以use打头的函数
 * 2.在函数体内封装可复用的逻辑（只要是可复用的逻辑）
 * 3.把组件中用到的状态或者回调return出去（以对象或者数组）
 * 4.在哪个组件中要用到这个逻辑，就执行这个函数，解构出来状态和回调进行使用
 *
 * hooks函数使用规则
 * 1.只能在组件中或者其他自定义Hook函数中调用
 * 2.只能在组件的顶层调用，不能嵌套在if、for、其他函数中
 * @returns {[boolean,toggle]}
 */
const useToggle = () => {
    const [flag, setFlag] = useState(false)
    const toggle = (flag) => {
        setFlag(!flag)
    }
    return [flag, toggle]
}

export const App = () => {
    let [flag, toggle] = useToggle();

    return (
        <div>
            <h2>this is app</h2>
            {flag && <div>this is div</div>}
            <button onClick={toggle}>toggle</button>
        </div>
    )
}
